<!DOCTYPE html>
<html>

<head>
    <title>RAF 倒计时</title>
</head>

<body>
    <div id="countdown">倒计时: 10</div>

    <script>
        const countdownEl = document.getElementById('countdown');
        let remainingTime = 100; // 倒计时总秒数
        let startTime = null;

        function updateCountdown(timestamp) {
            // 初始化开始时间
            if (!startTime) startTime = timestamp;

            // 计算已过去的时间（秒）
            const elapsedTime = (timestamp - startTime) / 1000;
            const currentTime = Math.max(remainingTime - Math.floor(elapsedTime), 0);

            // 更新显示
            countdownEl.textContent = `倒计时: ${currentTime}`;

            // 倒计时结束前持续调用
            if (currentTime > 0) {
                requestAnimationFrame(updateCountdown);
            } else {
                countdownEl.textContent = "倒计时结束！";
            }
        }

        // 启动倒计时
        requestAnimationFrame(updateCountdown);
    </script>
</body>

</html>